<template>
	<view class="e-p-20">
		<view class="delivery-tabs e-flex e-p-4">
			<view class="delivery-tabs__item e-flex-xy-center" v-for="item in list" :key="item.id" :class="{'c-white': value === item.value}" :style="{background: value === item.value ? AppSkin.primary : ''}" @tap="tabChange(item.value)">
				{{item.name}}
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props:{
		value:Number,
		list:{
			type: Array,
			default: () => {
				return []
			}
		}
	},
	data() {
		return {
			
		}
	},

	computed: {
		activeStyle() {
			if (this.value === 1) {
				return {
					background:this.AppSkin.primary.replace('1)', '0.05)'),
					borderColor: this.AppSkin.primary,
					color: this.AppSkin.primary
				}
			} else {
				return {
					background:'#ffffff',
					borderColor: '#E6E6E6',
					color: '#333333'
				}
			}
		},
		activeStyle1() {
			if (this.value === 2) {
				return {
					background:this.AppSkin.primary.replace('1)', '0.05)'),
					borderColor: this.AppSkin.primary,
					color: this.AppSkin.primary
				}
			} else {
				return {
					background:'#ffffff',
					borderColor: '#E6E6E6',
					color: '#333333'
				}
			}
		}
	},
	methods:{
		tabChange (value) {
			this.$emit('input',value)
			this.$emit('change', value)
		}
	}
}
</script>

<style lang="scss">
	.delivery-tabs {
		background-color: #fff;
		width: 100%;
		height: 70rpx;
		border-radius: 36rpx;
		color: #333;
		&__item {
			flex: 0 0 25%;
			height: 100%;
			border-radius: 32rpx;
			font-size: 28rpx;
		}
		
	}
</style>
